<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="test"></div>

        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
		<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
		<!-- 生产环境中不建议使用 -->
		<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        <script type="text/babel">
            class Demo extends React.Component{
                /* 
                    1.通过onXxx属性指定时间处理函数(注意区分大小写)
                        React使用的是自定义(合成)事件,而不是使用的原生DOM事件    为了更好的兼容性
                        React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)    为了高效
                    2.通过event.target得到发生事件的DOM元素对象    (不要过度的使用ref)
                */
                myRef = React.createRef();
                showData = () =>{
                    alert(this.myRef.current.value);
                }

                // 通过event.target得到发生事件的DOM元素对象    (不要过度的使用ref,能不用ref就不用ref)
                showInfo = (event) =>{
                    console.log(event)
                    alert(event.target.value)
                }
                render(){
                    return(
                        <div>
                            <input ref={this.myRef} type="text"/>
                            <button onClick={this.showData}>点击提示信息</button>
                            <hr/>
                            <input onBlur={this.showInfo} type="text" placeholder="失去焦点" />
                        </div>
                    )
                }
            }
            ReactDOM.render(<Demo/>,document.getElementById("test"));
        </script>
    </body>
</html>